import React from "react"

import { StyleSheet, ScrollView, View, Pressable } from "react-native"
import { Button, Image, Icon } from 'react-native-elements'

import * as ImagePicker from 'react-native-image-picker'

class Component extends React.Component {
  constructor (props) {
    super(props),

    this.state = {
      files: [ ]
    }
  }

  renderImage (f, idx) {
    return (
      <Image key={idx}
        source={{uri: f.uri}}
        style={styles.image}
      ></Image>
    )
  }

  render() {
    const files = this.state.files
    return (
      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
        {
          files.map((f, idx) => {
            return this.renderImage(f, idx)
          })
        }

        <Pressable style={styles.btn} onPress={() => {this.onLaunchImage()}}>
          <Icon
            name='add-outline'
            type='ionicon'
            color='#A0AEC0'
            size={48}
          />
        </Pressable>
      </ScrollView>
    )
  }

  onLaunchImage () {
    let options = {
      mediaType: 'photo'
    }

    ImagePicker.launchImageLibrary(options, (response) => {
      console.log( 'showImagePicker = ' , response)

      // 取消
      if (response.didCancel) {
        return
      }

      // 图片错误
      if (response.error) {
        return
      }

      this.setState({
        files: [...this.state.files, {
          uri: response.uri
        }]
      })
    })
  }
}

const styles = StyleSheet.create({
  image: {
    resizeMode: 'cover',
    width: 68,
    height: 68,
    borderRadius: 10,
    borderWidth: 0,
    marginRight: 5,
    borderColor: 'white',
    overflow: 'hidden'
  },
  btn: {
    resizeMode: 'cover',
    width: 68,
    height: 68,
    borderRadius: 10,
    backgroundColor: '#F3F3F3',
    overflow: 'hidden',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default Component
